<template>
  <div class="Home">
    <Advertisement></Advertisement>
    <!-- Todo 在收藏页面时,进行点赞,会改变排序 -->
    <!-- 顶部对齐 -->
    <Row type="flex" align="top" class="code-row-bg">
      <Col span="5" style="">
      <!-- 循环产生侧边导航栏 -->
      <template v-for="categoriesDatas in this.categoriesData" v-if="categoriesDatas._id !== 'all'">
        <Divider orientation="left" style="margin-top:19px">
          <h3>{{categoriesDatas.name}}</h3>
        </Divider>
        <template v-for="smallcategories in categoriesDatas.children" v-if="smallcategories.name !=='全部分类'">
          <Button @click='btnAcitonClass(smallcategories)' :type="siderColors" size='small' style="color: white; margin-left:5px ;margin-bottom:10px"
            shape="circle"> {{smallcategories.name}}</Button>
        </template>
      </template>
      </Col>
      <Col span="19" class="demo-tabs-style1" style="">
      <Tabs type="card" @on-click='btnActionChange'>
        <!-- 循环产生标签页 -->
        <TabPane :label='showProject.name' v-for="showProject in homeProjectName ">
          <Col span="24">
          <Divider>
            <h1 :style="{color:showProject.color}">{{showProject.name}}</h1>
          </Divider>
          </Col>
          <Col span='24'>
          <!-- <template v-for="projectDatas in projectData"> -->
            <template v-for="projectDatas in projectData">
            <Card class="card" style="margin-left:5px">
              <Row>
                <div style="text-align:center">
                  <Col span='7'>
                  <img :src="projectDatas.icon" class="imgset">
                  </Col>
                  <Col span="1">
                  <Divider type="vertical" />
                  </Col>
                  <Col span='13' style="margin-left:50px">
                  <!-- 点击标题查看详情 -->
                  <h3 class="title" @click="routerProjectDetailInfo(projectDatas.project_id)">{{projectDatas.titleName}}</h3>
                  <br/>
                  <p class="left">{{projectDatas.intro}}</p>
                  <br/>
                  <div style="text-align:left">
                    <Button size="small" type="text" style="padding-left:0px" v-clipboard:copy="projectDatas.project_id" v-clipboard:success="btnActionCopy"
                      v-clipboard:error="btnActionCopyError">
                      <span :style="{color:showProject.color }">方案 ID：{{projectDatas.project_id}}</span>
                    </Button>
                    <Button size="small" type="text" icon="ios-thumbs-up" @click="btnActionCollectOrLike(projectDatas._id,false)">{{projectDatas.like}}</Button>
                    <Button size="small" type="text" icon="md-heart-outline" @click="btnActionCollectOrLike(projectDatas._id,true)">{{projectDatas.collect}}</Button>
                    <Button size="small" type="text" @click="routerProjectDetailInfo(projectDatas.project_id)">
                      <span :style="{color:showProject.color }">查看详情</span>
                    </Button>
                  </div>
                  </Col>
                </div>
              </Row>
            </Card>
          </template>
          <Col span="24" style="margin-left:400px">
          <Button :type="siderColors" :loading="loading" icon="ios-refresh" @click="btnActionLoading">
            <span v-if="!loading">换一批</span>
            <span v-else>加载中...</span>
          </Button>
          </Col>
          </Col>
        </TabPane>
      </Tabs>
      </Col>
    </Row>
  </div>
</template>

<script>
  import Advertisement from "../Components/Home/Advertisement";
  export default {
    components: {
      Advertisement
    },
    data() {
      return {

         request : {
          type : 'request',
          style : 'get',
          url : this.$Global.url.baseUrl + this.$Global.url.projectClass,
          params: {
          limit: 9,
          sort: 0,
          page: 1,
          level: 0
        },
          name : 'projectData',
        },

        //存放方案信息数据
        projectData: [],

        //判断是否在加载中
        loading: false,

        //判断是否还需要加载页面 
        unloding: false,

        //标签页的标题
        homeProjectName: [
          {
            name: "全部产品",
            color: "#2d8cf0"
          },
          {
            name: "推荐产品",
            color: "#ed4014"
          },
          {
            name: "收藏最多",
            color: "#19be6b"
          }
        ],

        //请求参数
        params: {
          limit: 9,
          sort: 0,
          page: 1,
          level: 0
        },


        // limitPages: 3,
        //侧边栏标签颜色
        siderColors: 'info',

        //请求接口
        url: {
          projectClass: this.$Global.url.projectClass,
          categories: this.$Global.url.categories,
          userCollect: this.$Global.url.userCollect,
          userLike: this.$Global.url.userLike
        },

        //方案分类数据
        categoriesData: [{ name: "", _id: "" }]
      };
    },
    methods: {
      //************************数据增删改查***************************
      /**
       * 获取方案信息数据
       * 
       */
      getClassData() {
        this.$http
          .get(this.url.projectClass, {
            params: this.params
          })
          .then(res => {
            if (res.status == 200) {
              this.projectData = res.data.docs;
              this.params.page = res.data.page;
              this.pages = res.data.pages;
              this.loading = false;

            }
          })
          .catch(error => console.log(error));
      },
      // getClassData()
      // {    
      //       console.log(this.request)
      //       this.$store.dispatch(this.request)
      // },

      /**
       * 方案分类
       */

      getCategories() {
        this.$http
          .get(this.url.categories)
          .then(res => {
            if (res.status == 200) {
              this.categoriesData = res.data.categories;
              // this.sort = res.data.sort;
            }
          })
          .catch(error => console.log(error));
      },

      //******************************按钮操作*************************

      /**
       * 添加收藏(点赞)或取消收藏(点赞))
       * @param {表示对这个id的方案进行收藏或点赞} id
       * @param {为true时,进行收藏操作,为false时,进行点赞操作} bool
       */
      btnActionCollectOrLike(id, bool) {
        var url;
        if (bool === true) {
          url = this.url.userCollect;
        } else {
          url = this.url.userLike;
        }

        this.$http
          .post(url, { _id: id })
          .then(res => {
            if (res.status == 200) {
              let msg = res.data.message;
              this.$Message.success(msg);
              this.getClassData();
            }
          })
          .catch(error => {
            // this.$Message.error('用户尚未登录');
            console.log(error);
          })
      },

      /**
       * 点击按钮切换下一页数据
       */
      btnActionLoading() {
        this.loading = true;
        if (this.params.page == this.pages - 1) {
          this.params.page = 1;
        }
        else {
          this.params.page++;
        }
        // document.body.scrollTop = 0

        //点击按钮后返回顶部
        var backtop = setInterval(function () {
          document.documentElement.scrollTop = document.documentElement.scrollTop - 20;
          if (document.documentElement.scrollTop <= 0) {
            clearInterval(backtop)
          }
        }, 4)
        // if (this.params.page > this.limitPages) {
        //   this.unloding = true;
        // } else {
        this.getClassData();
        // }
      },

      /**
       * 进入分类管理页面
       * @param {存放着方案分类的名字和分类 ID} data
       */

      btnAcitonClass(data) {
        var levels;
        if (data.name == "全部分类") {
          levels = 1;
        } else {
          levels = 2;
        }
        var param = {
          className: data.name,
          classId: data._id,
          level: levels,
          projectClass: 'projectClass'
        };
        // console.log(param)
        this.$router.push({ name: "Project", params: param });
      },

      /**
       * 切换选项卡
       * @param {选型卡自带事件,返回当前选择的名字} name
       */
      btnActionChange(name) {
        // console.log(name);
        this.params.sort = name;
        this.params.page = 1
        if (name == 0) {
          this.siderColors = 'info'
        }
        else if (name == 1) {
          this.siderColors = 'error'
        }
        else {
          this.siderColors = 'success'
        }
        // this.siderColor = this.homeProjectName[name].color
        this.getClassData();
      },

      /**
       * 点击按钮，复制产品 Id
       */
      btnActionCopy() {
        this.$Message.success("方案 ID 复制成功");
      },
      btnActionCopyError() {
        this.$Message.warning("方案 ID 复制失败");
      },

      /**
       * 跳转全部分类
       */
      // routerAllProjcet() {
      //   var param = {
      //     className: "全部分类",
      //     classId: "all",
      //     level: 0,
      //     projectClass: 'projectClass'
      //   };
      //   this.$router.push({ name: "Project", params: param });
      // },

      /**
       * 点击标题，显示方案的详细信息，向函数传递的参数为方案ID
       * @param {产品方案 ID} 
       */
      routerProjectDetailInfo(projectid) {
        this.$router.push({ name: "ProjectDetailInfo", params: { projectid } });
      },

    },

    created() {
      /**
       * 开发模式下，拼接地址，形成完整的API接口
       */
      if (process.env.NODE_ENV === "development") {
        this.url.projectClass =
          this.$Global.url.baseUrl + this.$Global.url.projectClass;
        this.url.categories =
          this.$Global.url.baseUrl + this.$Global.url.categories;
        this.url.userCollect =
          this.$Global.url.baseUrl + this.$Global.url.userCollect;
        this.url.userLike = this.$Global.url.baseUrl + this.$Global.url.userLike;
      }
      this.getClassData();
      this.getCategories();
      // console.log('yes')
    }
  };
</script>


<style>
  h3.title {
    color: #17233d;
    margin-top: 5px;
    word-break: break-all;
    /*英文被自动换行*/
    text-align: left;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .left {
    text-align: left;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* color: #a6a6a8; */
  }

  .card {
    width: auto;
    height: auto;
    margin-left: 20px;
    margin-bottom: 20px;
  }

  .Home {
    margin-top: 20px;
  }

  .imgset {
    width: 240px;
    height: 180px;
  }

  .demo-tabs-style1>.ivu-tabs-card>.ivu-tabs-content {
    height: auto;
    margin-top: -16px;
  }

  .demo-tabs-style1>.ivu-tabs-card>.ivu-tabs-content>.ivu-tabs-tabpane {
    background: #fff;
    padding: 16px;
  }

  .demo-tabs-style1>.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
    border-color: transparent;
  }

  .demo-tabs-style1>.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
    border-color: #fff;
  }
</style>